<!--
~  Licensed to the Apache Software Foundation (ASF) under one or more
~  contributor license agreements.  See the NOTICE file distributed with
~  this work for additional information regarding copyright ownership.
~  The ASF licenses this file to You under the Apache License, Version 2.0
~  (the "License"); you may not use this file except in compliance with
~  the License.  You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~  Unless required by applicable law or agreed to in writing, software
~  distributed under the License is distributed on an "AS IS" BASIS,
~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~  See the License for the specific language governing permissions and
~  limitations under the License.
-->

<div
    [class.maximized]="dialogMaximized && instances.length > 0 && fieldDescriptors.length > 0"
    [class.insufficient-history]="!instances.length || !fieldDescriptors.length"
    class="flex flex-col status-history-container">
    @if (statusHistoryState$ | async; as statusHistoryState) {
        <div class="flex justify-between">
            <h2 mat-dialog-title>Status History</h2>
            @if (instances.length > 0 && fieldDescriptors.length > 0) {
                @if (!dialogMaximized) {
                    <button
                        class="primary-icon-button mt-2 mr-2"
                        mat-icon-button
                        (click)="maximize()"
                        title="Maximize dialog size">
                        <i class="fa fa-window-maximize"></i>
                    </button>
                } @else {
                    <button
                        class="primary-icon-button mt-2 mr-2"
                        mat-icon-button
                        (click)="minimize()"
                        title="Restore default dialog size">
                        <i class="fa fa-window-minimize"></i>
                    </button>
                }
            }
        </div>
        <context-error-banner [context]="ErrorContextKey.STATUS_HISTORY"></context-error-banner>
        <div class="status-history flex flex-col grow">
            <mat-dialog-content class="grow flex flex-1">
                <form [formGroup]="statusHistoryForm" class="flex flex-1 h-full">
                    <div class="status-history-dialog-content flex w-full flex-1">
                        @if (isInitialLoading(statusHistoryState)) {
                            <div class="flex-1">
                                <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
                            </div>
                        } @else {
                            @if (instances.length > 0 && fieldDescriptors.length > 0) {
                                @if (componentDetails$ | async; as componentDetails) {
                                    <div class="flex flex-1 w-full gap-x-4">
                                        <div class="component-details-panel relative h-full">
                                            <div
                                                class="component-details flex flex-col gap-y-3 overflow-y-auto absolute inset-0">
                                                @for (detail of details; track detail) {
                                                    @if (detail.key && detail.value) {
                                                        <div class="flex flex-col">
                                                            <div>{{ detail.key }}</div>
                                                            <div
                                                                [title]="detail.value"
                                                                class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
                                                                {{ detail.value }}
                                                            </div>
                                                        </div>
                                                    }
                                                }
                                                <div class="flex flex-col">
                                                    <div>Start</div>
                                                    <div class="tertiary-color font-medium">
                                                        <mat-form-field subscriptSizing="dynamic">
                                                            <mat-select
                                                                formControlName="start"
                                                                (selectionChange)="startChanged($event.value)">
                                                                <mat-select-trigger>
                                                                    {{
                                                                        formatSelectedStartTime(
                                                                            statusHistoryForm.get('start')?.value
                                                                        )
                                                                    }}
                                                                </mat-select-trigger>
                                                                @for (option of startTimeOptions; track option) {
                                                                    <mat-option [value]="option.value">
                                                                        <div class="flex flex-col gap-y-1">
                                                                            <div class="text-md">
                                                                                {{ option.label }}
                                                                            </div>
                                                                            <div class="text-sm tertiary-color">
                                                                                {{ option.formattedDate }}
                                                                            </div>
                                                                        </div>
                                                                    </mat-option>
                                                                }
                                                            </mat-select>
                                                        </mat-form-field>
                                                    </div>
                                                </div>
                                                <div class="flex flex-col">
                                                    <div>End</div>
                                                    <div class="tertiary-color font-medium">
                                                        {{ formattedMaxDate }}
                                                    </div>
                                                </div>
                                                <div class="flex flex-col">
                                                    <div class="detail-item">
                                                        <div>Min / Max / Mean</div>
                                                        <div class="tertiary-color font-medium">
                                                            {{ clusterStats.min }} / {{ clusterStats.max }} /
                                                            {{ clusterStats.mean }}
                                                        </div>
                                                    </div>
                                                    <div class="legend-entry flex justify-between items-center mr-1">
                                                        <mat-label
                                                            [ngStyle]="{
                                                                color: getColor(
                                                                    nodeStats,
                                                                    NIFI_NODE_CONFIG.nifiInstanceId
                                                                )
                                                            }"
                                                            >NiFi
                                                        </mat-label>
                                                        <mat-checkbox
                                                            value="nifi-instance-id"
                                                            (change)="selectNode($event)"
                                                            [checked]="
                                                                !!instanceVisibility['nifi-instance-id']
                                                            "></mat-checkbox>
                                                    </div>
                                                </div>
                                                @if (!!nodes && nodes.length > 0) {
                                                    <div class="flex flex-col">
                                                        <div
                                                            class="flex justify-between items-center border-b mr-1 pb-1.5">
                                                            <mat-label class="font-bold secondary-color"
                                                                >Nodes
                                                            </mat-label>
                                                            <mat-checkbox
                                                                class="tertiary-checkbox"
                                                                [checked]="areAllNodesSelected(instanceVisibility)"
                                                                [indeterminate]="
                                                                    areAnyNodesSelected(instanceVisibility)
                                                                "
                                                                (change)="selectAllNodesChanged($event)"></mat-checkbox>
                                                        </div>
                                                        <div class="pt-1.5">
                                                            <div>Min / Max / Mean</div>
                                                            <div class="tertiary-color font-medium">
                                                                {{ nodeStats.min }} / {{ nodeStats.max }} /
                                                                {{ nodeStats.mean }}
                                                            </div>
                                                        </div>
                                                        <div class="legend-entry mr-1">
                                                            @for (node of nodes; track node.id) {
                                                                @if (node.snapshots?.length) {
                                                                    <div class="flex justify-between items-start">
                                                                        <mat-label
                                                                            [ngStyle]="{
                                                                                color: getColor(nodeStats, node.id)
                                                                            }"
                                                                            >{{ node.label }}
                                                                        </mat-label>
                                                                        <mat-checkbox
                                                                            [value]="node.id"
                                                                            (change)="selectNode($event)"
                                                                            [checked]="
                                                                                !!instanceVisibility[node.id]
                                                                            "></mat-checkbox>
                                                                    </div>
                                                                }
                                                            }
                                                        </div>
                                                    </div>
                                                }
                                            </div>
                                        </div>
                                        <div class="chart-panel grow flex flex-col">
                                            @if (fieldDescriptors$ | async) {
                                                <div class="selected-descriptor-container flex flex-col">
                                                    <mat-form-field subscriptSizing="dynamic">
                                                        <mat-label class="value-label">Metric</mat-label>
                                                        <mat-select formControlName="fieldDescriptor">
                                                            @for (descriptor of fieldDescriptors; track descriptor) {
                                                                @if (descriptor.description) {
                                                                    <mat-option
                                                                        [value]="descriptor"
                                                                        nifiTooltip
                                                                        [tooltipComponentType]="TextTip"
                                                                        [tooltipInputData]="descriptor.description"
                                                                        [delayClose]="false">
                                                                        <span class="option-text">{{
                                                                            descriptor.label
                                                                        }}</span>
                                                                    </mat-option>
                                                                } @else {
                                                                    <mat-option [value]="descriptor">
                                                                        <span class="option-text">{{
                                                                            descriptor.label
                                                                        }}</span>
                                                                    </mat-option>
                                                                }
                                                            }
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                            }
                                            <status-history-chart
                                                [instances]="filteredInstances()"
                                                [visibleInstances]="instanceVisibility"
                                                [selectedFieldDescriptor]="selectedDescriptor"
                                                (nodeStats)="nodeStatsChanged($event)"
                                                (clusterStats)="clusterStatsChanged($event)"
                                                class="flex flex-1 flex-col">
                                            </status-history-chart>
                                        </div>
                                    </div>
                                }
                            } @else {
                                <div class="grow flex items-center justify-center">
                                    Insufficient history, please try again later.
                                </div>
                            }
                        }
                    </div>
                </form>
            </mat-dialog-content>
            <mat-dialog-actions align="start">
                <div class="flex w-full">
                    <div class="flex-1">
                        @if (instances.length > 0 && fieldDescriptors.length > 0) {
                            <div class="text-sm flex items-center gap-x-2">
                                <button mat-icon-button class="primary-icon-button" (click)="refresh()">
                                    <i
                                        class="fa fa-refresh"
                                        [class.fa-spin]="statusHistoryState.status === 'loading'"></i>
                                </button>
                                <div>Last updated:</div>
                                <div class="tertiary-color font-medium">
                                    {{ statusHistoryState.loadedTimestamp }}
                                </div>
                            </div>
                        }
                    </div>
                    <div>
                        <button mat-button mat-dialog-close>Close</button>
                    </div>
                </div>
            </mat-dialog-actions>
        </div>
    }
</div>
